<template>
  <div id="shopdetails">
    <!-- 头部 -->
    <div class="sp-details-container">
      <div class="sp-details-contain">
        <div class="sp-details-contain-1">
          <img class="sp-left" src="../image/shopdetails/4e708671b1c5c264.png" alt>
          <div class="sp-right">
            <div class="sp-right-1">
              <h2>沃尔玛-新街口店</h2>
              <div></div>
            </div>
            <div class="sp-right-2">
              <p>达达专送·60分钟</p>
              <p>基础运费4元</p>
            </div>
          </div>
        </div>
        <div class="sp-details-contain-2">
          <div class="dd1">
            <a href>满减</a>
            <span>联合利华洗护满88减12</span>
          </div>
          <div class="dd2">
            <span>
              13种优惠
              <i></i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二行搜索框 -->
    <div class="de-sreach">
      <div>
        <input type="text" placeholder="搜索店内商品，共2271件好物">
        <i></i>
      </div>
    </div>
    <!-- 第三行图片 -->
    <div class="Pic_box">
      <a href="#" class="Pic_box_1">
        <img
          class="Pic_box_1_1"
          src="https://img30.360buyimg.com/mobilecms/jfs/t1/8969/38/13246/171749/5c401deeEb14444fa/0726204c01f29d0d.jpg"
        >
      </a>
      <a href="#" class="Pic_box_1">
        <img
          class="Pic_box_1_1"
          src="https://img30.360buyimg.com/mobilecms/jfs/t1/20524/32/5528/376304/5c3ed86bE9c1e35a3/985fffe46ff79dfb.png"
        >
      </a>
    </div>
    <!-- 第四行及以下 -->
    <div class="preferential">
      <!-- 左侧 -->
      <ul class="pre-left">
        <li
          :class="activeClass == index ? 'active' : ''"
          v-for="(shopctg,index) in shopctgs"
          :key="shopctg.id"
          @click="licolor(shopctg,index)"
        >{{shopctg.text}}</li>
      </ul>
      <!-- 右侧 -->
      <div class="pref-right">
        <!-- 头部 -->
        <div class="prf-change">
          <span @click="skill()" :class="gd?'':'changea'">秒杀</span>
          <span @click="red()" :class="gd?'changea':''">直降</span>
        </div>
        <div class="pref-right-contain">
          <!-- 标题 -->
          <div class="pf-1">
            <div>秒杀(155)</div>
            <div>
              <span>销量</span>
              <span>
                价格
                <i></i>
              </span>
            </div>
          </div>
          <!-- 具体商品成列 -->
          <div class="bigbox">
            <div class="Secondskill">
              <ul class="sec-box">
                <li v-for="good1 in sp1" :key="good1.id">
                  <div href="#" class="sec-a-1">
                    <span>
                      <img :src="imgURL+good1.pics" alt>
                    </span>
                    <div class="sec-div-1">
                      <h3>{{good1.title}}</h3>
                      <p>{{good1.text1}}</p>
                      <span class="skp">{{good1.text2}}</span>
                      <div class="sec-bo">
                        <div class="sec-price">
                          <span>￥{{good1.sprice}}</span>
                          <span>￥{{good1.price}}</span>
                        </div>

                        <div class="sec-btn">
                          <div v-if="good1.num">
                            <span class="btn1" @click="reduce(good1)"></span>
                            <span class="txt">{{good1.num}}</span>
                          </div>
                          <span class="btn2" @click="add(good1)"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="pref-right-contain" :class="gd?'':'pref'">
          <div class="pf-1">
            <div>直降(200)</div>
            <div>
              <span>销量</span>
              <span>
                价格
                <i></i>
              </span>
            </div>
          </div>
          <div class="bigbox">
            <div class="Secondskill">
              <ul class="sec-box">
                <li v-for="good2 in sp2" :key="good2.id">
                  <div href="#" class="sec-a-1">
                    <span>
                      <img :src="imgURL+good2.pics" alt>
                    </span>
                    <div class="sec-div-1">
                      <h3>{{good2.title}}</h3>
                      <p>{{good2.text1}}</p>
                      <span class="skp">{{good2.text2}}</span>
                      <div class="sec-bo">
                        <div class="sec-price">
                          <span>￥{{good2.sprice}}</span>
                          <span>￥{{good2.price}}</span>
                        </div>

                        <div class="sec-btn">
                          <div v-if="good2.num">
                            <span class="btn1" @click="reduce(good2)"></span>
                            <span class="txt">{{good2.num}}</span>
                          </div>
                          <span class="btn2" @click="add(good2)"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Car :shopid="shop_id"></Car>
  </div>
</template>
<script>
import $ from "jquery";
import Car from "@/components/car.vue";
export default {
  props: ["shop_id"],
  components: { Car },
  data() {
    return {
      shopctgs: [],
      sp1: [],
      sp2: [],
      gd: false,
      activeClass: -1
    };
  },
  created() {
    this.getshopctg(), this.getgood1s(), this.getgood2s();
    //this.cars[this.shop_id]={} 购物车初始化，就是给cars添加 商店id的属性
    this.$set(this.cars, this.shop_id, {});
  },
  methods: {
    licolor(shopctg, index) {
      this.activeClass = index;
    },
    add(good1) {
      this.$set(this.cars[this.shop_id], good1.id, good1);
      if (this.cars[this.shop_id][good1.id].num == undefined) {
        //this.cars[this.shop_id][good1.id].num=1
        this.$set(this.cars[this.shop_id][good1.id], "num", 1);
      } else {
        if (
          this.cars[this.shop_id][good1.id].num <
          this.cars[this.shop_id][good1.id].store
        )
          this.cars[this.shop_id][good1.id].num++;
      }
      console.log(this.cars);
    },
    reduce(good1) {
      good1.num--;
      if (good1.num == 0) {
        this.$delete(this.cars[this.shop_id], good1.id);
      }
    },
    getshopctg() {
      this.axios
        .get(`${this.apiURL}/shopctg`)
        .then(ret => {
          let { data, error } = ret.data; //es6语法结构化
          this.shopctgs = data;
        })
        .catch(() => {});
    },
    getgood1s() {
      this.axios
        .get(`${this.apiURL}/sp1`)
        .then(ret => {
          let { data, error } = ret.data; //es6语法结构化
          this.sp1 = data;
        })
        .catch(() => {});
    },
    getgood2s() {
      this.axios
        .get(`${this.apiURL}/sp2`)
        .then(ret => {
          let { data, error } = ret.data; //es6语法结构化
          this.sp2 = data;
        })
        .catch(() => {});
    },
    red() {
      this.gd = true;
      console.log(this.gd);
    },
    skill() {
      this.gd = false;
      console.log(this.gd);
    },
  }
};
</script>
<style lang="scss" scoped>
* {
  margin: 0px;
  padding: 0px;
  font-weight: normal;
  font-style: normal;
}
.active {
  color: #333333;
  font-weight: bold;
  background-color: #fff;
}
a {
  text-decoration: none;
}
li {
  list-style-type: none;
}
#shopdetails {
  position: absolute;
  // top:0px;
  // bottom: 0px;
  right: 0px;
  left: 0px;
  background-color: #fff;
  // 头部
  .sp-details-container {
    padding-top: 16px;
    width: 100%;
    background: #fff;
    //border: 1px solid red;
    .sp-details-contain {
      padding: 4px 20px 30px 20px;
      //border: 1px solid red;
      .sp-details-contain-1 {
        display: flex;
        img {
          width: 136px;
          height: 136px;
        }
        .sp-right {
          width: 100%;
          margin-bottom: 30px;
          //border: 1px solid red;
          .sp-right-1 {
            display: flex;
            h2 {
              font-family: "Microsoft YaHei";
              width: 100%;
              margin-bottom: 18px;
              color: #3c3c3c;
              font-size: 30px;
              font-weight: 600;
              //border: 1px solid red;
            }
            div {
              width: 60px;
              height: 60px;
              background: url("../image/shopdetails/focus.png") no-repeat;
              float: right;
              background-size: 136px auto;
            }
          }
          .sp-right-2 {
            font-size: 24px;
            color: #666;
            p:nth-of-type(1) {
              margin-bottom: 18px;
            }
          }
        }
      }
      .sp-details-contain-2 {
        //display: flex;
        position: relative;
        margin-bottom: -1px;
        .dd1 {
          height: 20px;
          line-height: 20px;
          a {
            display: inline-block;
            border-radius: 8px 2px;
            background: #48c151;
            color: #fff;
            width: 60px;
            height: 48px;
            text-align: center;
            font-size: 22px;
            line-height: 48px;
          }
          span {
            color: #666;
            font-size: 10x;
          }
        }
        .dd2 {
          // float: right;
          position: absolute;
          right: 0px;
          top: 0px;
          span {
            color: #666;
            font-size: 22x;
            i {
              display: inline-block;
              width: 18px;
              height: 10px;
              background: url(../image/shopdetails/store_bg.png) -14px -8px;
              background-size: 74px 132px;
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
  .de-sreach {
    width: 100%;
    height: 80px;
    background-color: #fff;
    div {
      height: 50px;
      padding: 10px 20px 20px;
      input {
        outline: 0;
        border: 0;
        height: 50px;
        width: 550px;
        margin-top: 5px;
        padding-left: 54px;
        background: url(../image/shopdetails/search_bar_sprites.png) no-repeat -15px -22px;
        background-size: 88px auto;
        font-size: 24px;
        border-radius: 25px;
        background-color: #eee;
      }
      i {
        display: block;
        float: right;
        height: 60px;
        width: 94px;
        background-image: url(../image/shopdetails/groupCopy.png);
        background-position: center center;
        background-size: 80px 48px;
        background-repeat: no-repeat;
      }
    }
  }
  //第三行图片
  .Pic_box {
    position: relative;
    white-space: nowrap;
    font-size: 0;
    overflow: auto;
    height: 226px;
    padding: 0 0px 20px 20px;
  }
  .Pic_box_1 {
    width: 681px;
    height: 226px;
    display: inline-block;
    margin-right: 20px;
  }
  .Pic_box_1_1 {
    display: block;
    width: 100%;
    height: 226px;
    background: #f4f4f4;
    border-radius: 8px;
  }
  //第四行及以下
  .preferential {
    .pre-left {
      position: absolute;
      width: 160px;
      padding-bottom: 160px;
      background-color: #eeeeee;
      height: 100%;
      overflow-y: scroll;
      li {
        height: 92px;
        width: auto;
        padding: 4px 24px;
        line-height: 86px;
        font-size: 28px;
        text-align: center;
        color: #666666;
      }
      li:nth-of-type(1) {
        color: #333333;
        font-weight: bold;
        //background: #fff;
      }
    }
    .pref-right {
      //width: 590px;
      position: absolute;
      left: 160px;
      right: 0px;
      height: 100%;
      font-size: 28px;
      // 头部
      .prf-change {
        background-color: #fff;
        span {
          display: inline-block;
          color: #666666;
          margin-left: 28px;
          height: 72px;
          line-height: 72px;
          text-align: center;
          font-weight: 600;
        }
        .changea {
          color: #47b34f;
        }
      }
      .pref-right-contain {
        width: 100%;
        background: #fff;
        position: absolute;
        // 头部
        .pf-1 {
          display: flex;
          justify-content: space-between;
          font-size: 24px;
          div {
            height: 60px;
            line-height: 60px;
            color: #666666;
          }
          div:nth-of-type(1) {
            padding-left: 20px;
          }
          div:nth-of-type(2) {
            display: flex;
            span {
              display: block;
              padding-right: 14px;
              line-height: 60px;
              i {
                width: 20px;
                height: 20px;
                display: inline-block;
                background: url(../image/shopdetails/normal_price.png) no-repeat;
                margin-left: 4px;
                background-size: 14px;
              }
            }
          }
        }
        .bigbox {
          .Secondskill {
            background-color: #fff;
            height: 100%;
            .sec-box {
              // position: absolute;
              overflow-y: scroll;
              height: 540px;
              .sec-a-1 {
                padding: 30px 20px 30px 0px;
                color: #555;
                display: block;
                width: auto;
                display: flex;
                position: relative;
                span {
                  display: inline-block;
                  img {
                    width: 130px;
                    height: 130px;
                    display: inline-block;
                    border-radius: 8px;
                  }
                }
                .sec-div-1 {
                  h3 {
                    font-size: 28px;
                    font-weight: 600;
                    color: #333;
                    padding-left: 10px;
                  }
                  p {
                    padding-left: 10px;
                    padding-top: 10px;
                    color: #666666;
                    font-size: 20px;
                  }
                  .skp {
                    display: inline-block;
                    height: 20px;
                    line-height: 20px;
                    background: #ff7d7d;
                    color: #fff;
                    font-size: 18px;
                    padding: 10px;
                    border-radius: 8px 2px;
                    width: auto;
                    margin: 20px 0px 0px 10px;
                  }
                  .skp2 {
                    background: #ff9633;
                  }
                  .sec-bo {
                    .sec-price {
                      padding: 10px 0px 0px 10px;
                      span {
                        display: block;
                      }
                      span:nth-of-type(1) {
                        color: red;
                        font-size: 28px;
                      }
                      span:nth-of-type(2) {
                        text-decoration: line-through;
                        color: #666666;
                        font-size: 18px;
                      }
                    }
                    .sec-btn {
                      position: absolute;
                      right: 20px;
                      top: 160px;
                      // display: flex;
                      span {
                        display: block;
                        width: 56px;
                        height: 56px;
                        line-height: 56px;
                        text-align: center;
                        font-size: 30px;
                      }
                      div {
                        display: flex;
                        position: absolute;
                        right: 70px;
                        .btn1 {
                          background: url(../image/shopdetails/addNumSprite.png)
                            no-repeat;
                          background-position: -84px 0;
                          background-size: 224px 57px;
                          margin-right: 10px;
                        }
                      }
                      .btn2 {
                        background: url(../image/shopdetails/addNumSprite.png);
                        background-position: 0 0;
                        background-size: 224px 57px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .pref {
        z-index: -1;
      }
    }
    .navigation {
      position: fixed;
      left: 678px;
      bottom: 400px;
      width: 72px;
      height: 72px;
      background: rgba(0, 0, 0, 0.8) url(../image/shopdetails/bm.png) 14px 14px
        no-repeat;
      background-size: 130px 40px;
      border-radius: 10px 0px 0px 10px;
      .nav-box {
        width: 190px;
        background-color: rgba(0, 0, 0, 0.8);
        position: absolute;
        bottom: 80px;
        right: 0px;
        //z-index: 3;

        a {
          display: block;
          color: #fff;
          padding-left: 76px;
          border-bottom: 1px solid #4b4b4b;
          line-height: 70px;
          background: url(../image/shopdetails/bmenu.png) no-repeat;
          font-size: 28px;
        }
        .a1 {
          background-position: 20px -100px;
        }
        .a2 {
          background-position: 20px -200px;
        }
        .a3 {
          background-position: 20px -300px;
        }
        .a4 {
          background-position: 20px -397px;
        }
        .a5 {
          background-position: 20px -500px;
        }
        i {
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid #4b4b4b;
          position: absolute;
          right: 30px;
        }
      }
    }
  }
}
</style>


